<%@ page contentType="text/html;charset=UTF-8"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>职工管理系统</title><meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
    <%--<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>--%>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
    <div class="row">
        <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
            <div class="container-fluid">
                <div class="navbar-header navbar-center">
                    <a class="navbar-brand" href="#">&nbsp;职工管理系统&nbsp;</a>
                </div>
                <div>
                    <ul class="nav navbar-nav">
                        <li class="firstpage" style="background-color: #e7e7e7">
                            <a href="#">&nbsp;首页&nbsp;</a>
                        </li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">&nbsp;请假</a>
                        </li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                &nbsp;设置 <b class="caret"></b>
                            </a>
                            <ul class="dropdown-menu">
                                <li style="cursor: pointer"><a id="3-1" data-bs-toggle="modal" data-bs-target="#update-password">修改密码</a></li>
                            </ul>
                        </li>
                    </ul>
                    <!--向右对齐-->
                    <form id="back-form" class="navbar-form navbar-right" action="${pageContext.request.contextPath}/admin/back">
                        <button style="outline: none" id="back" type="button" class="btn btn-danger">退出登录</button>
                    </form>
                    <p class="navbar-text navbar-right" id="admin-tip">
                        <i class="fa fa-user-circle" id="username" style="font-size:18px;cursor:pointer">&nbsp;&nbsp;打工人</i>
                    </p>
                </div>
            </div>
        </nav>
    </div>
</div>
</div>
<div class="container-full">
    <iframe class="iframe" id="iframe1" src="http://localhost:8080/web/picture.jsp" style="width: 100%;height: 763px;position: absolute;top: 50px;outline: none;display: block"></iframe>
    <iframe class="iframe" id="iframe2" src="http://localhost:8080/web/apply.jsp" style="width: 100%;height: 763px;position: absolute;top: 50px;outline: none;display: none"></iframe>
</div>
<!-- 请假框 -->
<div class="modal fade" id="update-password">
    <div class="modal-dialog" style="width: 450px;z-index: 100">
        <div class="modal-content" >
            <!-- 模态框头部 -->
            <div class="modal-header">
                <h4 class="modal-title">请假申请</h4>
            </div>
            <!-- 模态框内容 -->
            <div class="modal-body" style="text-align: center">
                <div class="modal-body">
                    <div class="container mt-3">
                            <div class="mb-3">
                                <div class="input-group">
                                    <span class="input-group-addon" style="font-weight: bold">&nbsp;旧&nbsp;密&nbsp;码&nbsp;</span>
                                    <input type="password" class="form-control" id="old-pwd" placeholder="输入旧密码" style="width: 280px">
                                </div>
                            </div>
                            <br>
                            <div class="mb-3">
                                <div class="input-group">
                                    <span class="input-group-addon" style="font-weight: bold">&nbsp;新&nbsp;密&nbsp;码&nbsp;</span>
                                    <input type="password" class="form-control" id="new-pwd1" placeholder="输入新密码" style="width: 280px">
                                </div>
                            </div>
                            <br>
                            <div class="mb-3">
                                <div class="input-group">
                                    <span class="input-group-addon" style="font-weight: bold">确认密码</span>
                                    <input type="password" class="form-control" id="new-pwd2" placeholder="重复输入新密码" style="width: 280px">
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <!-- 模态框底部 -->
            <div class="modal-footer">
                <button style="outline: none" type="button" class="btn btn-primary" id="confirm" data-bs-dismiss="modal">修改</button>
                <button style="outline: none" type="button" class="btn btn-danger" id="close" data-bs-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>

<%--信息提示框--%>
<div style="position: absolute;left: 600px;margin-top: 95px;z-index: 1051">
    <div id="success" class="alert alert-success" style="width: 300px;text-align: center;display: none">修改成功|登录成功</div>
</div>
<div style="position: absolute;left: 600px;margin-top: 54px;z-index: 1051" >
    <div id="danger" class="alert alert-danger" style="width: 300px;text-align: center;display: none">两次密码不一致，请重新输入|原密码输入错误</div>
</div>
</body>
<script>
    //显示用户
    $.post("http://localhost:8080/web/admin/select",
        {id:${account}},
        function (resp){
            $('#username').text("  "+resp+"      ")
        }
    )
    //登陆成功信息显示
    $('#success').text('登录成功')
    $('#success').fadeToggle("slow")
    setTimeout(function (){
        $("#success").fadeToggle("slow")
    },2000)
    //退出登录
    $('#back').click(function (){
        $('#back-form').submit()
    })
    //点击不同导航栏出现阴影效果、并进行页面切换
    let dropdown=document.getElementsByClassName("dropdown")
    for (let i = 0; i < dropdown.length; i++) {
        dropdown[i].onclick=function (){
            $('.firstpage').css("background-color","#f8f7f7")
            if(i==0){
                $('.iframe').hide()
                $('#iframe2').show()
            }
        }
    }
    $('.firstpage').click(function (){
        $('.firstpage').css("background-color","#e7e7e7")
        $('.iframe').hide()
        $('#iframe1').show()
    })
    //修改密码-模态框出现
    $('#3-1').click(function (){
        $('#old-pwd').val("")
        $('#new-pwd1').val("")
        $('#new-pwd2').val("")
        $('#update-password').modal('show')
    })
    //修改密码-模态框消失
    $('.btn-danger').click(function (){
        $('#update-password').modal('hide')
    })
    //修改密码(点击确定)
    $('#confirm').click(function (){
        if($('#old-pwd').val()==""||$('#new-pwd1').val()==""||$('#new-pwd2').val()==""){
            $('#danger').text('请完善信息')
            $('#danger').fadeToggle("slow")
            setTimeout(function (){
                $("#danger").fadeToggle("slow")
            },2000)
        }else if($('#old-pwd').val()!=${pwd}){
            $('#danger').text('旧密码输入错误')
            $('#danger').fadeToggle("slow")
            setTimeout(function (){
                $("#danger").fadeToggle("slow")
            },2000)
        }else if($('#new-pwd1').val()!=$('#new-pwd2').val()){
            $('#danger').text('两次密码不一致，请重新输入')
            $('#new-pwd2').val("")
            $('#danger').fadeToggle("slow")
            setTimeout(function (){
                $("#danger").fadeToggle("slow")
            },2000)
        }else {
            $.post("http://localhost:8080/web/admin/update",
                {pwd:$('#new-pwd1').val(),id:${account}},
                function (resp){
                    if(resp=="success"){
                        $('#close').click()
                        $('#success').text('修改成功')
                        $('#success').fadeToggle("slow")
                        setTimeout(function (){
                            $("#success").fadeToggle("slow")
                        },2000)
                    }
                }
            )
        }
    })
</script>
</html>
